<template>
  <PageContainer>
    <view class="container">
      <Header title="消息详情 " />
      <view class="pa-15">
        <view>
          <text class="fz-16 fw-7">{{ currentMsgDetails?.typeName }}</text>
          <!-- <text style="color: #2878ff" class="pl-10">查看关联内容</text> -->
        </view>
        <view class="fz-16 fw-7 mt-12">{{ currentMsgDetails?.messageTitle }}</view>

        <template v-for="(item, index) in dataList" :key="index">
          <view v-if="item.messageChannel === SendTypeEnum.SMS">
            <view class="disFlxJS my-12">
              <view class="disFlxAC">
                <text class="ali-icon fz-16" style="color: #2878ff">&#xe601;</text>
                <text class="pl-5">手机短信</text>
              </view>
              <view>{{ item.name }}</view>
            </view>
            <view class="bgf pa-15 smsBox">
              <text space="nbsp">{{ item.smsZhContent }}</text>
            </view>
          </view>

          <view v-if="item.messageChannel === SendTypeEnum.WECHAT">
            <view class="disFlxJS my-12">
              <view class="disFlxAC">
                <text class="ali-icon fz-18" style="color: #07c160">&#xe602;</text>
                <text class="pl-5">微信公众号</text>
              </view>
              <view class="ov-1" style="max-width: 400rpx">{{ item.name }}</view>
            </view>
            <view class="bgf br-4">
              <view class="pa-15 borderBottom">
                <view class="mb-10 disFlxJS">
                  <view class="ov-1">{{ item.name }}</view>
                  <view class="moreBox"></view>
                </view>
                <view class="linh-30">
                  <text space="nbsp">{{ item.smsZhContent }}</text>
                </view>
              </view>
              <view class="disFlxJS py-8 px-15">
                <view class="disFlxAC">
                  <TImage
                    :src="globalConfig?.logo"
                    width="44rpx"
                    height="44rpx"
                    borderRadius="50%"
                  />
                  <text class="pl-4">{{ globalConfig?.name }}</text>
                </view>
                <view>
                  <text class="ali-icon" style="color: #2878ff">&#xe66e;</text>
                  <text class="pl-5 pr-12">小程序</text>
                  <text class="ali-icon">&#xe6c7;</text>
                </view>
              </view>
            </view>
          </view>
        </template>

        <view class="my-15" style="color: #aaabab">
          {{ formatToDate(currentMsgDetails?.sendTime, 'YYYY-MM-DD HH:mm') }}
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* messageDetails 消息详情  */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { useAdminStoreWithOut } from '@/store/modules/admin';
  import { SendTypeEnum } from '@/enums/admin';
  import { formatToDate } from '@/utils/dateUtil';
  import { getTypeMessageTemplate } from '@/api/admin';
  import { ref } from 'vue';

  const { globalConfig } = useAppStoreWithOut();
  const { currentMsgDetails } = useAdminStoreWithOut();

  interface TemplateData {
    messageChannel: SendTypeEnum;
    name: string;
    smsZhContent: string;
    templateId: number;
  }
  const dataList = ref<TemplateData[]>([]);
  const getTemplate = () => {
    getTypeMessageTemplate({
      messageChannelList: currentMsgDetails?.messageChannelList ?? [],
    }).then((_r) => {
      dataList.value = _r;
    });
  };
  getTemplate();
</script>

<style lang="scss" scoped>
  .container {
    font-size: 28rpx;
    .smsBox {
      box-shadow: 0px 2px 12px rgba(150, 151, 153, 0.16);
      border-radius: 32rpx 32rpx 32rpx 0px;
    }
    .moreBox {
      position: relative;
      width: 100rpx;
      height: 40rpx;
      overflow: hidden;
      flex-shrink: 0;
      &::before {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 60rpx;
        color: #aaabab;
      }
    }
    .label {
      color: #aaabab;
      width: 160rpx;
    }
    .value {
      word-break: break-all;
      flex: 1;
    }
  }
</style>
